/* =============================================================
 * dialogPopup.js v1.1.0
 * =============================================================
 * Original written by Ysy
 * =============================================================
 * Date 25/05/2020
 * ============================================================ */

(function (factory) {
    "use strict";
    if (typeof define === 'function' && define.amd) {
        define(['jquery'], factory);
    } else {
        factory(jQuery);
    }
}(function ($) {

    let DialogPopup = function (element, options) {
        this.options = $.extend({}, $.fn.dialogPopup.defaults, options);
        this.$element = $(element);
        this.$mask = $(this.options.mask);
        this.$main = $(this.options.main);
        this.$title = $(this.options.title);
        this.$content = $(this.options.content);
        this.$button = $(this.options.button);
        this.afterConfirm = this.options.afterConfirm;

        this.listen();
    };

    DialogPopup.prototype = {

        constructor: DialogPopup,

        render: function () {
            this.$main.append(this.$title);
            this.$main.append(this.$content);
            this.$main.append(this.$button);

            this.displayText();
            $("body").append(this.$main);
            $("body").append(this.$mask);

            this.show();
        },

        show: function () {
            this.$mask.fadeIn(300);
            this.$main.addClass("animated " + "bounceIn").fadeIn();
        },

        displayText: function () {
            this.$title.text(this.options.titleText);
            this.options.contentText.forEach((value, index) => {
                this.$content.append("<p>" + value + "</p>");
            });
            this.$button.text(this.options.buttonText);
        },

        listen: function () {
            this.$element.on("click", $.proxy(this.render, this));
            this.$mask.on("click", $.proxy(this.hide, this));
            this.$button.on("click", $.proxy(this.confirm, this));
        },

        hide: function () {
            this.$mask.fadeOut(300);
            this.$main.addClass("bounceOutUp").fadeOut();
            this.$main.removeClass("bounceIn");
            this.$main.removeClass("bounceOutUp");
            this.destory();
        },

        destory: function () {
            this.$main.detach();
        },

        confirm: function () {
            this.afterConfirm("123");
        },
    };

    let old = $.fn.dialogPopup;

    $.fn.dialogPopup = function (options) {
        return new DialogPopup(this, options);
    };

    $.fn.dialogPopup.defaults = {
        mask: "<div class='dialog_mask'></div>",
        main: "<div id='dialog' class='animated dialog'>",
        title: "<div class='title'></div>",
        content: "<div class='content'></div>",
        button: "<button></button>",
        afterConfirm: $.noop,
    };

    $.fn.dialogPopup.Constructor = DialogPopup;

    $.fn.dialogPopup.noConflict = function () {
        $.fn.dialogPopup = old;
        return this;
    };
}));
